<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="navCont">
				<view class="navItem" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">
					<view :class="navId==item.id?'navText navActive':'navText'">{{item.name}}</view>
					<image v-if="navId==item.id" class="navImg" src="/static/img/navImg.png"></image>
				</view>
			</view>
			<scroll-view class="workCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" >
				<view class="workItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
					<view class="saveInfo">
						<view class="saveTime">{{item.create_time}}</view>
					</view>
					<view class="workHead">
						<view class="workNameInfo">
							<view class="workName" v-if="item.watercraft_area">{{item.watercraft_area}}</view>
							<view class="headShu" v-if="item.watercraft_area"></view>
							<view class="workName">{{item.position_name}}</view>
							<view class="workTag" v-if="item.position_type==2">急聘</view>
						</view>
						<view class="workMoney">
							<text v-if="item.start_monry=='0'">面议</text>
							<text v-else>{{item.start_monry}}~{{item.end_monry}}{{item.unit==1?'元':'美元'}}</text>
						</view>
					</view>
					<view class="workInfo">
						<view class="workDes">
							<view class="workDesItem" v-if="item.watercraft_num">{{item.watercraft_num}}{{item.watercraft_dw}}</view>
							<view class="workDesItem">{{item.watercraft_type}}</view>
						</view>
					</view>
					<view class="workTags">
						<view class="tagItem" v-if="item.zsdj">{{item.zsdj}}</view>
						<view class="tagItem" v-if="item.gzjy">{{item.gzjy}}</view>
						<view class="tagItem" v-if="item.xlyq">{{item.xlyq}}</view>
						<view class="tagItem" v-if="item.nlyq">{{item.nlyq}}</view>
						<!-- <view class="tagItem" v-if="item.gwfl" :key="index2" v-for="(item2,index2) in item.gwfl.split(',')">{{item2}}</view> -->
					</view>
					<view class="workCom">
						<view class="comLeft">
							<view class="comImg">
								<image :src="item.enterprise_logo" /></image>
							</view>
							<view class="comInfo">
								<view class="comInfoTop">
									{{item.enterprise_name}}
								</view>
								<view class="comInfoUnder" v-if="item.hygk">
									<view class="comNameText">招聘港口：{{item.hygk}}</view>
								</view>
							</view>
						</view>
						<view class="workTime">{{item.update_time}}更新</view>
					</view>
				</view>
				<noData v-if="listArr.length==0&&!isChange"></noData>
				<loadMore v-if="!isChange&&last_page==page"></loadMore>
			</scroll-view>
		</view>
		<load v-if="!showCont||isChange"></load>
	</view>
</template>

<script>
	import noData from '@/components/noData.vue'
	import load from '@/components/load.vue'
	import loadMore from '@/components/loadMore.vue'
	
	import api from '@/http/api.js'
	export default {
		components:{noData,load,loadMore},
		data() {
			return {
				showCont:false,
				navArr:[
					{name:'全部岗位',id:0},
					{name:'面试中',id:2},
					{name:'面试成功',id:3},
					{name:'面试失败',id:4},
				],
				navId:0,
				listArr:[],
				page:1,
				per_page:10,
				last_page:0,
				isChange:false,
			};
		},
		methods:{
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++
					this.isChange = true
					this.getData()
				}
			},
			serchFn(){
				this.page =1
				this.listArr = []
				this.isChange = true
				this.getData()
			},
			navFn(item){
				this.navId = item.id
				this.serchFn()
			},
			detailFn(item){
				uni.navigateTo({
					url: '/pages/index/workDetail/workDetail?id='+item.enterprise_position_id
				});
			},
			getData(){
				let data = {
					deliver_status:this.navId,
					page:this.page,
					per_page:this.per_page,
				}
				api.getRequst(data,'/api/My/positionDeliver').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			}
		},
		created() {
			this.getData()
		}
	}
</script>
<style lang="scss">
	
	.showCont{
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
.navCont{
	width: 100%;
	padding: 80rpx 4% 30rpx;
	box-sizing: border-box;
	display: flex;
	background-color: #f8f8f8;
	z-index: 2;
	justify-content: space-between;
	.navItem{
		width: 22%;
		text-align: center;
		position: relative;
		.navImg{
			position: absolute;
			height: 80rpx;
			width: 80rpx;
			left: 20rpx;
			top: -66rpx;
			transform: rotateY(180deg);
			z-index: 1;
		}
		.navText{
			width: 100%;
			border-radius: 50rpx;
			background-color: #fff;
			padding: 15rpx 0;
			position: relative;
			z-index: 2;
			color: #666;
			font-size: 26rpx;
		}
		.navActive{
			background-color: #3f55cc;
			color: #fff;
		}
	}
}
.workCont{
	width: 100%;
	height: 500rpx;
	flex: 1;
	padding: 20rpx 4% 30rpx;
	overflow-y: auto;
	box-sizing: border-box;
	.workItem{
		background-color: #fff;
		padding: 30rpx 4% 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		.saveInfo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #3f55cc;
			padding-bottom: 30rpx;
			.cancelBtn{
				font-size: 40rpx;
				color: #999;
			}
		}
		.workHead{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.workNameInfo{
				display: flex;
				align-items: center;
				.workName{
					font-size: 28rpx;
					font-weight: bold;
				}
				.headShu{
					width: 4rpx;
					border-radius: 4rpx;
					background-color: #333;
					height: 24rpx;
					margin: 0 15rpx;
				}
				.workTag{
					padding: 5rpx 20rpx;
					font-size: 24rpx;
					// border: 1px solid #f56c6c;
					// background-color: ;
					background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
					color: #fff;
					// margin-left: 10rpx;
					border-radius: 20rpx 0 20rpx 0;
					transform: scale(0.85);
				}
			}
			.workMoney{
				color: #3f55cc;
			}
		}
		.workTags{
			display: flex;
			// margin: 10rpx 0;
			flex-wrap: wrap;
			.tagItem{
				margin-top: 15rpx;
				padding: 5rpx 20rpx;
				background-color:#dae3fb;
				color: #3f55cc;
				font-size: 26rpx;
				border-radius: 0rpx 25rpx 0rpx 0rpx;
				margin-right: 20rpx;
			}
		}
		.workInfo{
			width: 100%;
			// margin-bottom: 20rpx;
			.workDes{
				width: 100%;
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				.workDesItem{
					font-size: 26rpx;
					color: #999;
					margin-right: 20rpx;
				}
			}
		}
		.workCom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px dashed #ddd;
			margin-top: 20rpx;
			padding-top: 20rpx;
			.comLeft{
				display: flex;
				align-items: center;
				.comImg{
					width: 60rpx;
					height: 60rpx;
					overflow: hidden;
					font-size: 0;
					border-radius: 50%;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.comInfo{
					.comInfoUnder{
						color: #666;
						margin-top: 6rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						.comYuan{
							margin: 0 10rpx;
						}
					}
					
				}
			}
			.workTime{
				color: #999;
				font-size: 24rpx;
			}
		}
	}
	
}
</style>
